<template>
  <el-dialog center title="导单" :visible.sync="innerVisible">
    <div class="row">
      <div class="col-xs-12">
        <Upload name="photo" :formData="{group: 1}" @files="setFiles" url="/zuul/ms-mongodb/file/photo/upload">
          <button class="btn btn-primary">添加文件</button>
        </Upload>
        <el-button type="danger" @click.prevent="del">移除</el-button>
        <el-button type="text">下载模板</el-button>
      </div>
      <div class="col-xs-12 m--margin-top-10">
        <div class="alert alert-danger show text-center">
          由于上传文件转换为订单需要时间处理，上传后文件处理情况请在处理结果中查看，文件处理成功后订单将进入暂存单列表。
        </div>
      </div>
      <div class="col-xs-12">
        <el-table
          border
          ref="elTable"
          max-height="300"
          :data="files"
          @selection-change="selectionChange"
        >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="files.0.name"
            label="文件名">
          </el-table-column>
          <el-table-column
            prop="files.0.size"
            label="文件大小">
            <template slot-scope="scope">
              {{ scope.row['files'][0]['size']/1024 | decimalNumFilter }}k
            </template>
          </el-table-column>
          <el-table-column
            prop="process"
            label="上传进度">
            <template slot-scope="scope">
              {{ parseInt(scope.row['progress']().loaded / scope.row['progress']().total * 100, 10) | NaNToZero }} %
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click.prevent="submit" type="primary" :loading="loading">确认上传</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Upload from '@/components/base/Upload'
import {decimalNumFilter} from '@/assets/scripts/base/filters.js'
export default {
  components: {
    Upload
  },
  filters: {
    decimalNumFilter,
    NaNToZero(val) {
      if (isNaN(val)) {
        return 0
      }
      return val
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    value: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      innerVisible: this.visible,
      files: [],
      checkedRow: [],
      loading: false
    }
  },
  watch: {
    visible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.files = []
      this.innerVisible = val
    },
    innerVisible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.$emit('update:visible', val)
    }
  },
  methods: {
    setFiles(files) {
      this.files = files
    },
    selectionChange(rows) {
      this.checkedRow = rows
    },
    submit() {
      if (Array.isArray(this.files)) {
        this.loading = true
        let pArr = []
        this.files.forEach(v => {
          if (v.hadUpdated) {
            return
          }
          let p = v.submit().then(_ => {
            v.hadUpdated = true
          })
          pArr.push(p)
        })
        Promise.all(pArr).finally(_ => {
          this.loading = false
        })
      }
    },
    del() {
      this.checkedRow.forEach(v => {
        for (let k in this.files) {
          if (this.files[k] === v) {
            this.files.splice(k, 1)
          }
        }
      })
    }
  }
}
</script>
